$(function() {


    // 将文章列表渲染至表格  并封装
    xr()

    function xr() {
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(({ data: res }) => {
            // console.log(res);
            if (res.status != 0) {
                return layui.layer.msg(res.message)
            }
            layui.layer.msg(res.message)
            let arr = []
            res.data.forEach(e => {
                // 去掉id为负数的污染数据
                if (e.Id < 0) return
                arr.push(`
                <tr>
                <td>${e.Id}</td>
                <td>${e.name}</td>
                <td>${e.alias}</td>
                <td>
                    <button data-id="${e.Id}" class="layui-btn layui-btn-warm layui-btn-xs xgbtn">修改</button>
                    <button class="layui-btn layui-btn-danger layui-btn-xs scbtn">删除</button>
                </td>
            </tr>
                `)
                $('tbody').empty().html(arr.join(''))
            })
        })
    }


    let indexadd
        //添加分类点击事件
    $('#addbtn').click(function() {
            // layui的弹出层
            indexadd = layer.open({
                type: 1,
                title: '添加文章分类',
                area: ['500px', '250px'],
                content: `
                              <form class="layui-form" action=""id="addForm">
                              <!-- 隐藏域 -->
                              <input type="hidden" name="Id">
                          <!-- 分类名称 -->
                          <div class="layui-form-item">
                              <label class="layui-form-label">分类名称</label>
                              <div class="layui-input-block">
                                  <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                              </div>
                          </div>
                          <!-- 分类别名 -->
                          <div class="layui-form-item">
                              <label class="layui-form-label">分类别名</label>
                              <div class="layui-input-block">
                                  <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                              </div>
                          </div>
                          <!-- 按钮 -->
                          <div class="layui-form-item">
                              <div class="layui-input-block">
                                  <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                              </div>
                          </div>
                      </form>  `
            })

            // 添加分类
            $('#addForm').on('submit', function(e) {
                e.preventDefault()
                axios({
                    method: 'POST',
                    url: '/my/article/addcates',
                    data: $(this).serialize()
                }).then(({ data: res }) => {
                    // console.log(res);
                    if (res.status != 0) {
                        return layer.msg(res.message)
                    }
                    layer.msg(res.message)
                        //关闭弹出层
                    layer.close(indexadd)
                        // 重新渲染列表
                    xr()
                })
            })
        })
        // 修改按钮点击事件
    let indexedit
    $('tbody').on('click', '.xgbtn', function() {
        indexedit = layer.open({
                type: 1,
                title: '添加文章分类',
                area: ['500px', '250px'],
                content: `
                                  <form class="layui-form" action=""id="editForm" lay-filter="editForm">
                                  <!-- 隐藏域 -->
                                  <input type="hidden" name="Id">
                              <!-- 分类名称 -->
                              <div class="layui-form-item">
                                  <label class="layui-form-label">分类名称</label>
                                  <div class="layui-input-block">
                                      <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                                  </div>
                              </div>
                              <!-- 分类别名 -->
                              <div class="layui-form-item">
                                  <label class="layui-form-label">分类别名</label>
                                  <div class="layui-input-block">
                                      <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                                  </div>
                              </div>
                              <!-- 按钮 -->
                              <div class="layui-form-item">
                                  <div class="layui-input-block">
                                      <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                                  </div>
                              </div>
                          </form>  `
            })
            // 将文章类别数据渲染至表单
        let id = $(this).attr('data-id')
        axios({
            method: 'GET',
            url: '/my/article/cates/' + id
        }).then(({ data: res }) => {
            // console.log(res);
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            layui.form.val('editForm', res.data)
        })


        // 提交修改
        $('#editForm').on('submit', function(e) {
            e.preventDefault()
            axios({
                method: 'POST',
                url: '/my/article/updatecate',
                data: $(this).serialize()
            }).then(({ data: res }) => {
                // console.log(res);
                if (res.status != 0) {
                    return layer.msg(res.message)
                }
                layer.msg(res.message)
                    //关闭弹出层
                layer.close(indexedit)
                    // 重新渲染列表
                xr()
            })
        })
    })


    // 删除
    $('tbody').on('click', '.scbtn', function() {
        let id = $(this).siblings('button').attr('data-id')
        axios({
            method: 'GET',
            url: '/my/article/deletecate/' + id
        }).then(({ data: res }) => {
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            layer.msg(res.message)
            xr()
        })
    })
})